<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <head th:include="views/public"/>
</head>
<body>
<div id="vm" class="layui-content">
    <!--搜索树-->
    <div style="width: 18%;height: 100%;padding-top:1%;padding-left:1%;display:inline-block;float:left">
        <el-input size="small" style="width: 200px" placeholder="输入关键字" v-model="filterText"></el-input>
        <el-tree node-key="id" default-expand-all :filter-node-method="filterNode" @node-click="nodeClick" :data="deptTree" ref="tree"></el-tree>
    </div>


    <div style="width: 81%;display:inline-block;float:right">
        <div style="margin-left: 1%;padding-top: 1%;">
            <el-form :model="form" ref="form1" :inline="true" label-width="68px">
                <el-form-item label="文件名" prop="originalFileName">
                    <el-input   placeholder="" v-model="form.originalFileName"  clearable size="small" class="search-input" @keyup.enter.native="search"/>
                </el-form-item>
                <el-form-item label="上传人员" prop="username">
                    <el-input   placeholder="" v-model="form.sysUser.username"  clearable size="small" class="search-input" @keyup.enter.native="search"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset('form1')">重置</el-button>
                    <el-button-group>
                        <el-tooltip class="item" effect="Light" content="文件上传" placement="bottom">
                            <el-button type="primary" @click="open"  size="mini" icon="el-icon-upload2"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </div>
        <template>
            <el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 98%;margin-left: 1%">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="id" label="文件编号"> </el-table-column>
                <el-table-column prop="originalFileName" label="文件名称" > </el-table-column>
                <el-table-column prop="size" label="文件大小"> </el-table-column>
                <el-table-column prop="sysUser.username" label="上传人员"> </el-table-column>
                <el-table-column prop="createTime" label="上传时间"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="download(scope.$index, scope.row)">下载</el-button>
                        <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--page-->
        <div class="block" style="padding-top: 1%">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                           :page-sizes="[10, 30, 50, 100, 300]" background :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper"
                           :total="count">
            </el-pagination>
        </div>
    </div>

    <!--修改-->
    <el-dialog
            title="文件上传"
            :visible.sync="dialogFormVisible"
            width="25%">
        <span>
            <el-upload class="upload-demo" drag
                    action="String" ref="upload"
                       :http-request="uploadFile"
                       :on-remove="handleRemove"
                       :file-list="fileList"
                       :before-upload="beforeUpload"
                       :on-change="changeFile"
                    multiple :auto-upload="false">
                <el-progress v-show="uploadFlag == true" type="circle" :percentage="percent" style="margin-top: 20px"></el-progress>
                <div v-show="tipFlag == true">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <!--<div class="el-upload__tip" slot="tip">限制大小</div>-->
                </div>
            </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消上传</el-button>
            <el-button type="primary" @click="submitUpload">确定上传</el-button>
        </span>
    </el-dialog>
</div>
<script th:src="@{/assets/js/oss/files.js}"></script>
</body>

</html>